<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 充值金额选项
const amountOptions = [
  { value: 6, label: '6元', description: '6勾玉', price: 6 },
  { value: 30, label: '30元', description: '30勾玉', price: 30 },
  { value: 98, label: '98元', description: '98勾玉', price: 98 },
  { value: 198, label: '198元', description: '198勾玉 + 10勾玉', price: 198 },
  { value: 328, label: '328元', description: '328勾玉 + 30勾玉', price: 328 },
  { value: 648, label: '648元', description: '648勾玉 + 80勾玉', price: 648 }
]

// 特权礼包
const privilegePacks = [
  { 
    id: 1, 
    title: '新手专属礼包', 
    description: '限购1次，首充额外赠送10勾玉', 
    price: 6, 
    originalPrice: 18,
    items: ['6勾玉', '10勾玉', '随机SR式神碎片']
  },
  { 
    id: 2, 
    title: '月卡特权', 
    description: '30天内每日领取勾玉和神秘符咒', 
    price: 30, 
    originalPrice: 30,
    items: ['每日20勾玉', '每日1张神秘符咒', '专属月卡头像框']
  },
  { 
    id: 3, 
    title: '豪华礼包', 
    description: '超值礼包，适合老玩家', 
    price: 68, 
    originalPrice: 128,
    items: ['68勾玉', '3张神秘符咒', '6星青吉鬼']
  }
]

// 响应式数据
const selectedAmount = ref(null)
const selectedPaymentMethod = ref('alipay')
const showSuccessModal = ref(false)
const currentUser = ref(null)

// 组件挂载时获取用户信息
onMounted(() => {
  // 从localStorage获取用户信息（路由守卫已确保用户已登录）
  const userData = localStorage.getItem('currentUser')
  if (userData) {
    currentUser.value = JSON.parse(userData)
  }
})

// 选择充值金额
const selectAmount = (amount) => {
  selectedAmount.value = amount
}

// 选择支付方式
const selectPaymentMethod = (method) => {
  selectedPaymentMethod.value = method
}

// 处理支付
const handlePayment = () => {
  if (!selectedAmount.value) {
    alert('请选择充值金额')
    return
  }
  
  console.log('发起支付请求:', {
    amount: selectedAmount.value,
    paymentMethod: selectedPaymentMethod.value
  })
  
  // 模拟支付成功
  setTimeout(() => {
    showSuccessModal.value = true
  }, 1000)
}

// 关闭成功弹窗
const closeSuccessModal = () => {
  showSuccessModal.value = false
  // 可以选择返回上一页
  // router.back()
}

// 返回游戏
const goBackToGame = () => {
  showSuccessModal.value = false
  router.push('/onmyoji')
}
</script>

<template>
  <div class="recharge-container">
    <!-- 页面标题 -->
    <header class="recharge-header">
      <div class="header-content">
        <button class="back-button" @click="router.back()">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M15 18L9 12L15 6" stroke="#d4af37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          返回
        </button>
        <h1 class="page-title">充值中心</h1>
        <div class="header-right"></div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="recharge-content">
      <!-- 页面标题 -->
      <div class="recharge-header-section">
        <h1 class="recharge-title">游戏充值</h1>
      </div>
      <!-- 用户信息卡片 -->
      <div class="user-card">
        <div class="user-info">
          <div class="user-avatar">
            <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
              <circle cx="30" cy="30" r="30" fill="#333"/>
              <path d="M30 20C24.48 20 20 24.48 20 30C20 35.52 24.48 40 30 40C35.52 40 40 35.52 40 30C40 24.48 35.52 20 30 20ZM30 12C39.94 12 48 20.06 48 30C48 39.94 39.94 48 30 48C20.06 48 12 39.94 12 30C12 20.06 20.06 12 30 12Z" fill="#d4af37"/>
            </svg>
          </div>
          <div class="user-details">
            <h2 class="user-name">{{ currentUser?.username || '游客' }}</h2>
            <p class="user-id">ID: {{ currentUser?.id || '未登录' }}</p>
          </div>
        </div>
      </div>

      <!-- 充值金额选择 -->
      <section class="recharge-section">
        <h2 class="section-title">充值金额</h2>
        <div class="amount-grid">
          <div 
            v-for="option in amountOptions" 
            :key="option.value"
            class="amount-card"
            :class="{ selected: selectedAmount?.value === option.value }"
            @click="selectAmount(option)"
          >
            <div class="amount-price">{{ option.label }}</div>
            <div class="amount-description">{{ option.description }}</div>
          </div>
        </div>
      </section>

      <!-- 特权礼包 -->
      <section class="recharge-section">
        <h2 class="section-title">特权礼包</h2>
        <div class="packs-container">
          <div v-for="pack in privilegePacks" :key="pack.id" class="pack-card">
            <div class="pack-header">
              <h3 class="pack-title">{{ pack.title }}</h3>
              <div class="pack-price">
                <span class="current-price">¥{{ pack.price }}</span>
                <span v-if="pack.originalPrice > pack.price" class="original-price">¥{{ pack.originalPrice }}</span>
              </div>
            </div>
            <p class="pack-description">{{ pack.description }}</p>
            <div class="pack-items">
              <span v-for="(item, index) in pack.items" :key="index" class="item-tag">{{ item }}</span>
            </div>
            <button class="buy-button" @click="selectAmount({value: pack.price, label: `${pack.price}元`, description: pack.title, price: pack.price})">立即购买</button>
          </div>
        </div>
      </section>

      <!-- 支付方式 -->
      <section class="recharge-section">
        <h2 class="section-title">支付方式</h2>
        <div class="payment-methods">
          <div 
            class="payment-method" 
            :class="{ selected: selectedPaymentMethod === 'alipay' }"
            @click="selectPaymentMethod('alipay')"
          >
            <div class="payment-icon alipay-icon"></div>
            <span class="payment-name">支付宝</span>
          </div>
          <div 
            class="payment-method" 
            :class="{ selected: selectedPaymentMethod === 'wechat' }"
            @click="selectPaymentMethod('wechat')"
          >
            <div class="payment-icon wechat-icon"></div>
            <span class="payment-name">微信支付</span>
          </div>
          <div 
            class="payment-method" 
            :class="{ selected: selectedPaymentMethod === 'netease' }"
            @click="selectPaymentMethod('netease')"
          >
            <div class="payment-icon netease-icon"></div>
            <span class="payment-name">网易支付</span>
          </div>
        </div>
      </section>

      <!-- 支付按钮 -->
      <div class="payment-action">
        <button class="pay-button" @click="handlePayment">
          确认支付 {{ selectedAmount?.label || '请选择金额' }}
        </button>
      </div>
    </main>

    <!-- 支付成功弹窗 -->
    <div v-if="showSuccessModal" class="modal-overlay">
      <div class="success-modal">
        <div class="success-icon">
          <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
            <circle cx="30" cy="30" r="30" fill="#52c41a"/>
            <path d="M45 20L25 40L15 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h2 class="success-title">充值成功！</h2>
        <p class="success-message">您的充值已成功到账，感谢您的支持！</p>
        <div class="success-actions">
          <button class="success-btn" @click="closeSuccessModal">继续充值</button>
          <button class="success-btn primary" @click="goBackToGame">返回游戏</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 充值页面样式 */
.recharge-container {
  min-height: 100vh;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.7) 0%, rgba(26, 26, 26, 0.7) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.recharge-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.03), rgba(212, 175, 55, 0.03) 10px, rgba(212, 175, 55, 0.02) 10px, rgba(212, 175, 55, 0.02) 20px);
  pointer-events: none;
}

/* 页面头部 */
.recharge-header {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--gold-primary);
  font-size: 16px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.back-button:hover {
  background: rgba(212, 175, 55, 0.1);
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--gold-primary);
  margin: 0;
}

/* 主内容区 */
.recharge-header-section {
  text-align: center;
  margin-bottom: 60px;
}

.recharge-title {
  font-size: 48px;
  font-weight: bold;
  font-family: 'Ma Shan Zheng', cursive;
  letter-spacing: 5px;
  background: linear-gradient(45deg, var(--gold-primary), var(--gold-secondary), #ffefd5, var(--gold-primary));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
  text-stroke: 1px rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
  animation: gradientAnimation 8s ease infinite, glow 2s ease-in-out infinite alternate;
}

.recharge-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;
  position: relative;
  z-index: 1;
}

/* 用户信息卡片 */
.user-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-details h2 {
  margin: 0 0 5px 0;
  color: var(--gold-primary);
}

.user-details p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* 充值部分通用样式 */
.recharge-section {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
}

.section-title {
  color: var(--gold-primary);
  font-size: 18px;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

/* 充值金额选择 */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.amount-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.amount-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.amount-card.selected {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold-primary);
}

.amount-price {
  font-size: 20px;
  font-weight: bold;
  color: var(--gold-primary);
  margin-bottom: 5px;
}

.amount-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* 特权礼包 */
.packs-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pack-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.pack-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.pack-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.pack-title {
  margin: 0;
  color: var(--gold-primary);
  font-size: 18px;
}

.pack-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.current-price {
  font-size: 22px;
  font-weight: bold;
  color: #ff4d4f;
}

.original-price {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}

.pack-description {
  margin: 10px 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.pack-items {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.item-tag {
  background: rgba(212, 175, 55, 0.2);
  color: var(--gold-primary);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.buy-button {
  background: var(--gold-primary);
  color: #000;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.buy-button:hover {
  background: #e6c96d;
  transform: scale(1.05);
}

/* 支付方式 */
.payment-methods {
  display: flex;
  gap: 20px;
}

.payment-method {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.payment-method:hover {
  background: rgba(255, 255, 255, 0.1);
}

.payment-method.selected {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold-primary);
}

.payment-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.alipay-icon {
  background: linear-gradient(135deg, #1677ff, #4096ff);
}

.wechat-icon {
  background: linear-gradient(135deg, #07c160, #36d399);
}

.netease-icon {
  background: linear-gradient(135deg, #ff3b30, #ff9500);
}

.payment-name {
  font-size: 16px;
}

/* 支付按钮 */
.payment-action {
  text-align: center;
  margin-top: 40px;
}

.pay-button {
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
  color: #000;
  border: none;
  padding: 15px 60px;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.pay-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}

/* 成功弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.success-modal {
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid var(--gold-primary);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.2);
}

.success-icon {
  margin-bottom: 20px;
}

.success-title {
  color: var(--gold-primary);
  font-size: 24px;
  margin: 0 0 10px 0;
}

.success-message {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 30px 0;
}

.success-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.success-btn {
  padding: 10px 30px;
  border-radius: 25px;
  border: 2px solid var(--gold-primary);
  background: transparent;
  color: var(--gold-primary);
  cursor: pointer;
  transition: all 0.3s;
  font-weight: bold;
}

.success-btn:hover {
  background: rgba(212, 175, 55, 0.2);
}

.success-btn.primary {
  background: var(--gold-primary);
  color: #000;
}

.success-btn.primary:hover {
  background: #e6c96d;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .recharge-title {
    font-size: 36px;
    letter-spacing: 3px;
  }
  
  .amount-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .payment-methods {
    flex-direction: column;
  }
  
  .pack-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 渐变动画 */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 发光动画 */
@keyframes glow {
  from {
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.6);
  }
  to {
    text-shadow: 0 0 30px rgba(212, 175, 55, 1), 0 0 40px rgba(212, 175, 55, 0.8), 0 0 50px rgba(212, 175, 55, 0.6);
  }
}

@media (max-width: 480px) {
  .amount-grid {
    grid-template-columns: 1fr;
  }
  
  .recharge-content {
    padding: 20px 15px;
  }
  
  .recharge-section {
    padding: 20px 15px;
  }
}
</style>